import React, { Component } from 'react';

/*
  组件更新时
  1. 传一个新的属性 New Props
  2. setState
  3. forceUpdate
*/
class App extends Component {
  static getDerivedStateFromProps(props,state){
    console.log("执行 getDerivedStateFromProps");
    return null;
  }
  shouldComponentUpdate(){
    console.log("shouldComponentUpdate");
    return true;// 组件继续更新
    // return false;// 组件停止更新 
  }

  state = {
    msg:"(*^_^*)"
  }
  render() {
    console.log("render");
    return (
      <div>
        <h1>{this.state.msg}</h1>
        <button onClick={()=>{
          this.setState({
            msg:"😀"
          })
        }}>更新界面</button>
      </div>
    );
  }
  getSnapshotBeforeUpdate(preProps,preState){
    console.log("getSnapshotBeforeUpdate");
    return 100;
  }
  // https://zh-hans.reactjs.org/docs/react-component.html#static-getderivedstatefromprops
  componentDidUpdate(preProps,preState,snapshot){
    console.log("componentDidUpdate");
    console.log(snapshot);
  }
}

export default App;
